<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">教学改革修改</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 内容主体区域 -->
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="18">
            <el-form-item label="标题" prop="title">
              <el-input v-model="editForm.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <!-- <el-col :span="10">
            <el-form-item
              label="阅读量–后门"
              prop="count"
              :rules="[
                { required: true, message: '内容不能为空', trigger: 'blur' },
              ]"
            >
              <el-input v-model.number="editForm.count"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="30">
          <el-col
            ><el-form-item label="内容" prop="content">
              <!-- <tinymce
                :height="300"
                ref="editor"
                v-model="editForm.content"
              ></tinymce> -->
              <el-tiptap
                lang="zh"
                v-model="editForm.content"
                :extensions="extensions"
              ></el-tiptap></el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            v-model="detail.remarks"
            rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="hideEditDialog">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import md5 from "js-md5";
import Tinymce from "@/components/Tinymce";
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Image,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock,
} from "element-tiptap";
import "element-tiptap/lib/index.css";
import CustomColumn from "./../components/CustomColumn.vue";
export default {
    components: { Tinymce,"el-tiptap": ElementTiptap },
  data() {
    return {
      id: "",
      name: "",
      options: [],
      // 查询条件
      query: {
        name: "",
        topicId: 20,
        pageNum: 1,
        pageSize: 10,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      content: "",
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Image(),
        new Underline(), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(), // 华丽的分割线
        new ListItem(),
        new BulletList(), // 无序列表
        new OrderedList(), // 有序列表
        new TodoItem(),
        new TodoList(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock(),
      ],
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "所属栏目编号", show: false },
        { label: "内容", show: true },
        { label: "排序", show: false },
        // { label: "热点", show: true },
        { label: "阅读量–后门", show: false },
        { label: "创建时间", show: false },
        { label: "修改时间", show: false },
        { label: "备注", show: true },
      ],
      query1: {
        name: "",
        topicId: 10,
        pageNum: 1,
        pageSize: "",
      },
      // 内容列表
      list1: [],
      // 内容总条数
      total1: 0,
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
      // 是否显示新增
      showAddVisible: false,
      // 新增数据
      addForm: {},
      // 是否显示修改
      showEditVisible: false,
      // 修改数据
      editForm: {
        name: "",
        content: "",
      },
    };
  },
  created() {
    this.getList1();
    this.getList();
  },
  methods: {
    // 显示自定义列
    showSetColumn() {
      this.$refs.columns.dialogVisible = true;
    },
    // 获取内容列表
    getList1() {
      this.$http.post("/v1/api/topics/page", this.query1).then((res) => {
        if (res.data.code == 0) {
          var gotList = res.data.data.list;
          gotList.forEach((v) => {
            this.options.push({
              value: v.name,
              id: v.id,
            });
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
          this.editForm = res.data.data.list[0];
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleChange() {
      this.query.topicId = this.name;
      this.getList();
      console.log(this.name);
    },
    handleAdd() {
      this.query.topicId = this.name;
      console.log(this.name);
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
    handleSizeChange(pageSize) {
      this.query1.pageSize = pageSize;
      this.getList1();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query1.pageNum = page;
      this.getList1();
    },
    // 显示详情
    showDetailDialog(row) {
      this.detail = row;
      this.showDetailVisible = true;
    },
    // 隐藏详情
    hideDetailDialog() {
      this.detail = {};
      this.showDetailVisible = false;
    },
    // 显示新增
    showAddDialog() {
      this.addForm = {
        content: "",
        hot: "",
        remarks: "",
        title: "",
        topicId: "",
      };
      this.showAddVisible = true;
    },
    // 隐藏新增
    hideAddDialog() {
      this.showAddVisible = false;
    },
    // 显示修改
    showEditDialog(row) {
      this.editForm = row;
      this.showEditVisible = true;
    },
    // 隐藏修改
    hideEditDialog() {
      this.showEditVisible = false;
    },
    // 修改
    edit() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.$http.put("/v1/api/newses", this.editForm).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.$message.success("修改成功");
              this.showEditVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
</style>
